<template>
  <div class="CustomerList">
    <!-- header -->
    <new-header title="家庭作业历史详情" />
    <!-- 4个选择 -->
    <div class="center">
      <h1 class="title">家庭作业 - {{ this.homeWork.name }}</h1>
      <div class="mid">
        <div class="mid-item">
          <span>日期</span>
          <div class="right">{{ this.homeWork.begintime }}</div>
        </div>
        <div class="mid-item">
          <span>班级</span>
          <div class="right">初二一班</div>
        </div>
        <div class="mid-item">
          <span>班级人群</span>
          <div class="right">{{ this.workObj.totalcount }}人</div>
        </div>

      </div>
      <div class="bot">
        <span>作业内容</span>
        <div class="right">{{ this.homeWork.content }}
        </div>
      </div>
    </div>

    <div class="center2">
      <!-- 选项卡 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="有效运动时间完成率" name="1">
          <you-xiao ref="youxiao" :students="this.students" />
        </el-tab-pane>
        <!-- <el-tab-pane label="作业内容完成率" name="2">
          <nei-rong ref="neirong" />
        </el-tab-pane> -->

      </el-tabs>
    </div>
  </div>
</template>

<script>
import HomeWork from '@/api/homeWork.js'
import NewHeader from '@/components/NewHeader.vue'
import YouXiao from './components/YouXiao.vue'
// import NeiRong from './components/NeiRong.vue'
export default {
  name: 'WorkHistoryDetail',
  components: {
    YouXiao,
    // NeiRong,
    NewHeader
  },
  data() {
    return {
      active_class: 1,
      currentPage: 1,
      size: 10,
      total: 100,
      textarea2: '',
      activeName: '1',
      timerObj: {}, // 计时器存储器
      timerId: 1, // 模拟计时器id，唯一性
      id: '',
      date: '',
      workObj: {},
      homeWork: {},
      students: []
    }
  },
  beforeDestroy() {
    this.stop()
  },
  mounted() {
    this.id = this.$route.params.id
    this.date = this.$route.query.date
    this.HomeWorkGet()
    const that = this
    setTimeout(function() {
      that.$refs.youxiao.flag = true
    }, 1000)
    // if (this.activeName === '1') {
    //   this.$refs.youxiao.flag = true
    // }
    // this.start()
  },
  methods: {
    async HomeWorkGet() {
      const params = {
        id: this.id,
        date: this.date
      }
      const result = await HomeWork.HomeWorkGet(params) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.workObj = result.result
        this.homeWork = result.result.homeWork
        this.students = result.result.students
      }
    },

    go_to_select() {
      this.$router.push({ path: '/work/work-select/' })
    },
    handleClick(tab, event) {
      if (tab.name === '1') {
        this.$refs.youxiao.flag = true
      } else if (tab.name === '2') {
        this.$refs.neirong.flag = true
      }
    },
    getData() { // 模拟数据
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({ data: 666 })
        }, 500)
      })
    },
    start() {
      const id = this.timerId++
      this.timerObj[id] = true
      const that = this
      async function timerFn() {
        if (!that.timerObj[id]) return
        const { data } = await that.getData() // 模拟请求
        console.log(data)
        setTimeout(timerFn, 1000)
      }
      timerFn()
      console.log(this.timerObj)
    },
    stop() {
      this.timerObj = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.center2{
  margin-top: 25px;
  // padding: 25px;
  background-color: white;
  ::v-deep .el-tabs__nav-scroll{
    padding-left: 25px;
  }
  ::v-deep .el-tabs__item.is-active{
    color: #42b983;
  }
  ::v-deep .el-tabs__active-bar{
    background-color: #42b983;
  }
}
.top-header{
  background-color: white;
  overflow: hidden;
  position: absolute;
  top: -70px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding: 0 25px;
  left: 0;
  .left{
    float: left;
    display: flex;
    align-items: center;
    img{
      width: 15px;
    }
    span{
      margin-left: 10px;
      width: 80px;
      font-size: 20px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .right{
    float: right;
    display: flex;
    align-items: center;
    .right-item{
      margin-right: 20px;
      width: 120px;
    }
    .last{
      color: #1890FF;
      font-size: 14px;
    }

  }

}
.CustomerList{
  position: relative;
  padding: 25px;

  .center{
    padding: 25px;
    background-color: white;
    .title{
      font-size: 20px;
      font-weight: bold;
    }
    .mid{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .mid-item{
        margin-bottom: 20px;
        margin-right: 100px;
        overflow: hidden;
        font-weight: bold;
        span{
          float: left;
          font-size: 14px;
          margin-right: 50px;
          color: rgba(0, 0, 0, 0.5);
        }
        .right{
          float: left;
          color: rgba(0, 0, 0, 1);
          font-size: 14px;
          overflow: hidden;
          img{
            float: left;
            margin-right: 5px;
            display: block;
            width: 19px;
            height: 19px;
            background-color: black;
          }
        }
      }
    }
    .bot{
      margin-bottom: 20px;
      overflow: hidden;
      span{
        // float: left;
        font-size: 16px;
        margin-right: 50px;
        font-weight: bold;
        width: 28px;
        color: rgba(0, 0, 0, 0.85);
      }
      .right{
        margin-top: 30px;
        width: calc(100% - 28px - 50px);
        // float: left;
        color:rgba(0, 0, 0, 0.65);
        font-size: 14px;
        overflow: hidden;
        ::v-deep textarea{
          height: 300px;
        }
      }
    }
  }
}

</style>
